<template>
  <div>
    <top :active="active"></top>
    <!-- user 登录页 -->
    <div class="content">
      <div class="box">
        <div class="logins">
          <el-form ref="form" :model="form" label-width="80px">
            <el-form-item label="用户名">
              <el-input v-model="form.username"></el-input>
            </el-form-item>
            <el-form-item label="密码">
              <el-input v-model="form.password"></el-input>
            </el-form-item>
          </el-form>
          <div class="btn">
            <el-button type="primary" @click="logins" :loading="loading"
              >登录</el-button
            >
            <el-button type="primary" @click="goregister" :loading="loading"
              >注册账号</el-button
            >
            <el-button type="primary" @click="Reset" :loading="loading"
              >重置密码</el-button
            >
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { loginNow, updatePassword, updatePasswords } from "@/api/login";
import top from "@/components/top/index.vue";
export default {
  components: { top },
  data() {
    return {
      form: {
        username: "",
        password: "",
      },
      loading: false,
      dialogFormVisible: false,
      formLabelWidth: "120px",
      form1: {
        problem: "",
        answer: "",
      },
      answer: "",
    };
  },
  methods: {
    logins() {
      this.form.roles = "0";
      if (this.form.username == "") {
        this.$message({ message: "请输入用户名", type: "error" });
      } else if (this.form.password == "") {
        this.$message({ message: "请输入密码", type: "error" });
      } else {
        loginNow(this.form).then((res) => {
          if (res.code == 200) {
            localStorage.setItem("myToken", res.data.token);
            localStorage.setItem("myname", this.form.username);
            this.$router.push({ path: "/person" });
          }
        });
      }
    },
    goregister() {
      this.$router.push({ path: "/register" });
    },
    Reset() {
      this.$router.push({ path: "/Reset" });
    },
  },
};
</script>

<style lang="scss" scoped>
.content {
  width: 100vw;
  height: 100vh;
  position: relative;
  background-image: url("../../assets/5.jpg"); /* 背景图片的路径 */
  background-size: cover; /* 使背景图片充满整个 div */
  background-position: center; /* 将背景图片居中 */
}
.logins {
  width: 20vw;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #fff;
}
.btn {
  width: 100%;
  display: flex;
}
.btn .el-button {
  width: 50%;
}

.box {
  width: 25vw;
  height: 30vh;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #fff;
}
</style>
